<!-- Creating custom components -->
<!-- http://localhost:3000/isolated/final/04.html -->

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react@18.1.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18.1.0/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <script type="text/babel">
    // NOTE: this is NOT being used as a component. We're not quite there yet.
    function message({children}) {
      return <div className="message">{children}</div>
    }

    const element = (
      <div className="container">
        {message({children: 'Hello World'})}
        {message({children: 'Goodbye World'})}
      </div>
    )

    ReactDOM.createRoot(document.getElementById('root')).render(element)
  </script>
</body>
